/*
 *===============DdmgCloudPlatform3 V2.0===============
 * DdmgCloudPlatform3 V2.0
 * Copyright@大大买钢2018,All Rights Reserved
 * Author: xiejiahao（185296836@qq.com)
 * @Date: 2019-06-26 15:41
 * TODO: 选择账套modal
 *===============DdmgCloudPlatform3 V2.0===============
*/
<template>
  <el-dialog
    title="选择账套"
    :show-close="false"
    :visible.sync="visible"
    :close-on-click-modal="false"
    width="650px"
    class="chooseBill"
  >
    <el-form ref="operateQuery" class="popBox" v-for="(item, index) in billList" :key="index">
      <el-row class="add-line">
        <el-col :span="24">
          <div class="bill-body" v-for="(billLisItem, key) in item" :key="key" @click="chooseBillSbt(billLisItem)">
            <div class="bill-head-title">
              <span class="title" v-if="key == 0">{{billLisItem.company_name}}</span>
              <div 
                class="bill-person-info" 
                :class="{'disable': billLisItem.institutional_active_state == 2 && billLisItem.member_type == 2}">
                <div class="mark">
                  <img class="user-avatar" src="../../../assets/images/forsuccess.png">
                  <span class="mark-item mark-item-first">机构：{{billLisItem.institutional_name}}</span>
                  <span class="mark-item" v-if="billLisItem.isLessthan30" style="color:red;">到期时间：{{billLisItem.institutional_active_time}}（{{billLisItem.member_type_name}}）</span>
                  <span class="mark-item" v-else>到期时间：{{billLisItem.institutional_active_time}}（{{billLisItem.member_type_name}}）</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import * as HttpServices from "@/api/HttpServices";
import { throttle } from "@/utils/index";
import { MessageBox } from "element-ui";

export default {
  name: "chooseBill",
  data() {
    return {
      billList: [],
      username: '',
      visible: false,
      isSwitch: true,
    };
  },
  mounted() {
    console.log('login-chooseBill')
  },
  methods: {
    showSwitchBillDialog(billList, username) {
      let curDate = new Date(),
          dayTime = 1000 * 3600 * 24;
      for (const key in billList) {
        billList[key].forEach(obj=>{
          let timeDiff = (new Date(obj.institutional_active_time) - curDate) / dayTime;
          obj.isLessthan30 = timeDiff < 30 ? true : false;
          obj.institutional_active_time = obj.institutional_active_time.slice(0, 10);
        })
      }
      this.username = username;
      this.billList = billList;
      this.visible = true;
    },
    //提交
    chooseBillSbt: throttle(function(item) {
      let selectByAccount = ()=> { 
        this.$store.dispatch("d2admin/account/selectByAccount", {
          vm: this, 
          payload: {
            id: item.id, 
            username: this.username
          }
        }).catch(error=>{
          this.visible = false;
        })
        this.$emit('selectAccountComplete');
      }
      // 如果是正式会员并且已到期
      if(item.institutional_active_state == 2 && item.member_type == 1){
        this.$alert('您的企业会员已经到期，请及时续费（目前只有查看权限）', '到期提醒', {
          confirmButtonText: '确定',
          type: 'warning',
          callback: action => {
            if(action == 'confirm'){
              selectByAccount();
            }
          }
        });
      } else {
        selectByAccount();
      }
    }, 1500)
  }
};
</script>

<style lang="scss" >
.chooseBill {
  .user-avatar {
    width: 70px;
    height: 70px;
    float: left;
    margin: 15px 0.5rem 15px 2rem;
    color: rgba(0, 0, 0, 0.1);
  }

  .el-dialog__body {
    border-top: 1px dashed #fff;
    padding: 0;
    max-height: 530px;
    background: #cdcdcd;
    overflow-y: auto;
    .add-line {
      margin-bottom: 0;
      background: #fff;
    }
    .el-form {
      margin-bottom: 4px;
    }
    .el-form:last-child {
      margin: 0;
    }
    //切换账套
    .bill-body {
      cursor: pointer;
      padding: 0 20px;
      overflow: hidden;
      .bill-head-title {
        text-indent: 2rem;
        padding-top: 15px;
        height: 45px;
        line-height: 30px;
        font-size: 16px;
      }
      .billLisItem-cursor {
        cursor: pointer;
        color: #409eff;
      }
      .bill-head-title::after {
        content: "";
        display: table;
        clear: both;
      }
      .bill-person-info {
        position: relative;
        background: #fff;
        height: 100px;
        .picture {
          float: left;
          width: 70px;
          height: 70px;
          float: left;
          margin: 15px 0.5rem 15px 2rem;
          color: rgba(0, 0, 0, 0.1);
        }
        .mark {
          border-top: 1px dashed #e9e9e9;
          width: 100%;
          position: relative;
          float: left;
          line-height: 30px;
          .mark-item {
            display: block;
            font-size: 14px;
          }
          .mark-item-first {
            margin-top: 20px;
          }
          .change-bill-list {
            position: absolute;
            right: 10px;
            top: 35px;
            z-index: 2;
            color: #409eff;
          }
          .el-icon-success {
            font-size: 30px;
          }
        }
        .mark::after {
          content: "";
          display: table;
          clear: both;
        }
      }
      .bill-person-info.disable{
        background-color: #d6d5d5;
      }
    }
  }
}
</style>
